import Vue from 'vue'
const Component = {
  props: {
    active: Boolean,
    propOne: {
      required: true
    }
  },
  template: `
  <div>
    <input type="text" v-model="text">
    <span @click="handleChange">{{propOne}} </span>
    <span v-show="active">see me if active</span>
  </div>
  `,
  methods: {
    handleChange () {
      this.$emit('change')
    }
  },
  data () {
    return {
      text: 0
    }
  },
  mounted () {
    console.log('Component mounted')
  }
}

const CompVue = Vue.extend(Component)

new CompVue({
  el: '#root',
  propsData: {
    propOne: 'xxxx'
  },
  data () {
    return {
      text: '1243'
    }
  },
  mounted () {
    console.log('CompVue mounted')
  }
})
